<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			li{ width: 25px; height:25px; border:1px solid #ccc; float:left; list-style:none; background: url(spriteicon.png) no-repeat left 0;}
        </style>
        <script type="text/javascript">
        	window.onload = function(){
        		var lis = document.getElementsByTagName("li")
        		//alert(lis.length)
        		for(var i = 0; i<=lis.length; i++ ){
        			lis[i].style.background = "url(spriteicon.png) no-repeat left "+i*-25+"px"
        		}
        	}
        </script>
    </head>
    <body>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </body>
</html>